<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    var scaleData = [{
        'name': '工程建设',
        'value': 10
    },
        {
            'name': '产权交易',
            'value': 10
        },
        {
            'name': '土地交易',
            'value': 10
        },
        {
            'name': '其他交易',
            'value': 10
        },
        {
            'name': '土地交易',
            'value': 10
        },
        {
            'name': '其他交易',
            'value': 10
        },

    ];
    var rich = {
        white: {
            color: '#ddd',
            align: 'center',
            padding: [3, 0]
        }
    };
    var placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
        }
    };
    var data = [];
    var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
    for (var i = 0; i < scaleData.length; i++) {
        data.push({
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor:color[i],
                    shadowColor: color[i]
                }
            }
        }, {
            value: 2,
            name: '',
            itemStyle: placeHolderStyle
        });
    }
    var seriesObj = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [195, 200],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function(params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < scaleData.length; i++) {
                            total += scaleData[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if(params.name !== '') {
                            return params.name + '\n{white|' + '占比' + percent + '%}';
                        }else {
                            return '';
                        }
                    },
                    rich: rich
                },
                labelLine: {
                    length:30,
                    length2:100,
                    show: true,
                    color:'#00ffff'
                }
            }
        },
        data: data
    }];
    let option = {
        backgroundColor: '#04243E',
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: seriesObj
    };
    myChart.setOption(option);
</script>
